<template>
    <div class="box">
        <!-- 导航栏 -->
        <navList title="我的"></navList>

        <div class="top">
            <img src="../../../images/003.webp" alt="" style="width: 10rem;height: 10rem;border-radius: 50%;">
            <div>用户名:{{ userInfo.username }}</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue"

import navList from "@/components/navList.vue"

import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

let userInfo = ref(store.userInfo)
// console.log(userInfo.value)


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 20rem;
        // background: #cfc;
        display: flex;
        margin-top: 20px;
        justify-content: center;
    }
}
</style>